<template>
  <div>

    <!--


       --   3,职位搜索
        --  4，分类
          5，视频简历推荐


          -->
<!--1,顶部导航 -->

    <div class="headerDiv">


      <el-menu
          :default-active="activeIndex2"
          class="el-menu-demo     headerMenu "
          mode="horizontal"
          @select="handleSelect"
          background-color="#545c64"
          text-color="#fff"
          active-text-color="#ffd04b">
        <el-menu-item index="1">首页</el-menu-item>

        <el-menu-item index="2">职位</el-menu-item>

        <el-menu-item index="3">校园</el-menu-item>

        <el-menu-item index="4">公司</el-menu-item>


        <!--      <el-submenu index="2">-->
        <!--        <template slot="title">我的工作台</template>-->
        <!--        <el-menu-item index="2-1">选项1</el-menu-item>-->
        <!--        <el-menu-item index="2-2">选项2</el-menu-item>-->
        <!--        <el-menu-item index="2-3">选项3</el-menu-item>-->
        <!--        <el-submenu index="2-4">-->
        <!--          <template slot="title">选项4</template>-->
        <!--          <el-menu-item index="2-4-1">选项1</el-menu-item>-->
        <!--          <el-menu-item index="2-4-2">选项2</el-menu-item>-->
        <!--          <el-menu-item index="2-4-3">选项3</el-menu-item>-->
        <!--        </el-submenu>-->
        <!--      </el-submenu>-->
        <!--      <el-menu-item index="3" disabled>消息中心</el-menu-item>-->
        <!--      <el-menu-item index="4"><a href="https://www.ele.me" target="_blank">订单管理</a></el-menu-item>-->
        <!--   -->
        <!--   -->


      </el-menu>


    </div>

<!--     2,登录注册
-->

    <div class="LoginDiv">

      <img class="LongImg" src="https://static.zhipin.com/v2/web/geek/images/fast-reg.png"/>


      <img class="FontImg" src="https://static.zhipin.com/v2/web/geek/images/fast-reg-text.png">

      <div class="LoginContent">

        <input class="MobileInput" placeholder="手机号" type="text"/>


        <input class="VerifiInput" placeholder="验证码" type="text"/>


        <button class="VerifiButton">获取</button>
        <button class="ButtonCSs">登陆/注册</button>


      </div>


    </div>

<!--        5，视频简历推荐 -->

    <h2 class="HotFont">-- &nbsp;&nbsp; 热招职位&nbsp; &nbsp;--</h2>


    <div class="recommendDiv">

      <div class="VedioMenu">
        <ul class="VedioUl">
          <li class="VedioItem">后端</li>
          <li class="VedioItem">前端</li>
          <li class="VedioItem">前端</li>
        </ul>

      </div>


      <div class="VedioContent">

<!-- 第一行  -->
        <div class="firstDiv"   v-for="(item,index) in first" :key="index" >
<!--          {{item.id}}-->

          <p>{{item.vTitle}}</p>

          <div>

            <video class="vedioDiv01" :src="item.vUrl" controls="controls">
              您的浏览器不支持 video 标签。
            </video>

          </div>


          <p>{{item.vDesc | descFilter }}</p>




        </div>



        <!-- 第二行  -->
        <div class="firstDiv"   v-for="(item,index) in second" :key="index" >

          {{item.id}}
        </div>




        <!-- 第三行  -->
        <div class="firstDiv"   v-for="(item,index) in three" :key="index" >
          {{item.id}}

        </div>



      </div>




    </div>

<!--  6,底部    -->

    <div class="footDiv">

      <div class="contactUs">
      <h3> 联系我们：</h3>
      <span> 河南省郑州市高新区国家大学科技园孵化1号楼3A13</span>

      </div>


    </div>




  </div>
</template>

<script>


import axios from "axios";

export default {
  name: "Home",

  data() {
    return {
      activeIndex: '1',
      activeIndex2: '1',

      vedioArr:[/*
          {id:1,name:"视频01",url:"111111"},
          {id:2,name:"视频02",url:"111111"},
          {id:3,name:"视频03",url:"111111"},

          {id:4,name:"视频04",url:"111111"},
          {id:5,name:"视频05",url:"111111"},
          {id:6,name:"视频06",url:"111111"},

        {id:7,name:"视频04",url:"111111"},
          {id:8,name:"视频05",url:"111111"},
          {id:9,name:"视频06",url:"111111"},

        {id:10,name:"视频04",url:"111111"},
          {id:11,name:"视频05",url:"111111"},
          {id:12,name:"视频06",url:"111111"},

        {id:13,name:"视频04",url:"111111"},
          {id:14,name:"视频05",url:"111111"},
          {id:15,name:"视频06",url:"111111"},*/



          ]


    };
  },

  created() {
// eslint-disable-next-line no-undef,no-unused-vars
    var _this = this ;

    // eslint-disable-next-line no-undef
    axios.get("http://localhost:8081/api/vedio/selectHomeVedioList").then(function (data){
console.log(data)
      _this.vedioArr = data.data.data ;
// console.log(this.vedioArr) ;
    }) ;

  },

  methods: {
    handleSelect(key, keyPath) {
      console.log(key, keyPath);
    }
  },
  computed: {
    first() {
      return this.vedioArr.slice(0,3) ;
    },

      second() {
      return this.vedioArr.slice(3,6) ;
      },

      three() {
      return this.vedioArr.slice(6,9) ;
      },

  },

  filter:{
    descFilter:function (data){
      return data.substr(0,3) ;
    }
  }

}
</script>

<style scoped>

.contactUs{











}


.footDiv{
  float: left;
  height: 300px;
  width: 100%;
  background-color: #5dd5c8;
  border: red 1px solid;


}


.vedioDiv01{

  width: 100%;
  height: 100%;


}

.firstDiv{

  position: inherit;
  float: left;
  height: 26%;
  width: 25%;
  background-color: #d2c3c3;
 margin: 2%;
  /*margin-left: 10%;*/

}
.firstDiv:hover{
  background-color: #d2bfc4;
  height: 27%;
  width: 26%;


}













.VedioContent{


 margin: 0 auto;
  height: 800px;
  width: 100%;
  /*background-color: #aade64;*/

  line-height:50px;
  text-align:center;




}


.VedioUl{
  list-style-type: none;
}

.VedioItem{
  float: left;
  margin-left: 50px;
  font-size: 26px;
  margin-top: 15px;


}

.VedioItem:hover{
  font-size: 30px;
  color: #5dd5c8;
}



.VedioMenu{
  height: 60px;
  /*background-color: #a1bddc;*/
  width: 100%;
  list-style-type: none;


}


.HotFont {


  margin: 0px 0 20px 0;


}


.recommendDiv {
  margin: 0 auto;
  height: 700px;
  width: 80%;
  /*background-color: #bba3d0;*/


}


.VerifiButton {
  color: #54cbc4;
  font-size: 12px;


  display: inline-block;
  min-width: 60px;
  box-sizing: content-box;
  height: 36px;
  line-height: 36px;
  border: 1px #79d9ce solid;
  font-size: 16px;
  color: #fff;
  letter-spacing: 1px;
  background: #5dd5c8;
  text-align: center;
  cursor: pointer;


}


.LoginContent {
  float: right;
  height: 40px;
  width: 60%;
  /*background-color: #202329;*/

  margin-left: 50%;
  /*margin-top: 20%;*/
  margin-bottom: 20px;
  margin-right: 10px;


}


.ButtonCSs {
  /*height: 40px;*/
  /*width: 80px;*/


  display: inline-block;
  min-width: 112px;
  box-sizing: content-box;
  height: 36px;
  line-height: 36px;
  border: 1px #79d9ce solid;
  font-size: 16px;
  color: #fff;
  letter-spacing: 1px;
  background: #5dd5c8;
  text-align: center;
  cursor: pointer;

  margin-left: 5px;

}

.ButtonCSs:hover {
  background-color: #6adbcf;
  color: #fff;
}


.MobileInput {
  height: 40px;
  width: 200px;
}

.VerifiInput {

  height: 40px;
  width: 200px;
  margin-left: 10px;

}


.FontImg {
  float: left;
  width: 30%;
  height: 20%;
  margin-left: 30%;
  margin-bottom: 8%;

  margin-top: 20px;


}


.LongImg {
  float: left;

  height: 100%;
  width: 30%;
  margin-left: 10%;
  margin-top: 20px;


}

.LoginDiv {
  float: left;
  width: 100%;
  height: 20%;
  background-color: #5dd5c8;;


}


.headerMenu {

  padding-left: 30%;


}


.headerDiv {
  width: 100%;
  height: 49px;
  background: #202329;


}


</style>
